import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';

export default function LineChart1() {
  // 折线图1模块制作
  const chartRef = useRef(null);

  let yearData = [
    {
      year: "2023", // 年份
      data: [
        [24, 40, 101, 134, 90, 230, 210, 186, 120, 230, 210, 120],
        [40, 64, 191, 241, 290, 168, 243, 213, 180, 200, 141, 180]
      ]
    }
  ];
  useEffect(() => {
    if (chartRef.current) {
      const myChart = echarts.init(chartRef.current);
      let option = {
        // 通过这个color修改两条线的颜色
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          textStyle: {
            color: "#4c9bfd"
          },
          right: "10%"
        },
        grid: {
          top: "20%",
          left: "4%",
          right: "4%",
          bottom: "18%",
          show: true,
          borderColor: "#012f4a",
          containLabel: true
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#4c9bfd"
          },
          axisLine: {
            show: false // 去除轴线
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#4c9bfd"
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a"
            }
          }
        },
        series: [
          {
            name: "新增粉丝",
            type: "line",
            smooth: true,
            data: yearData[0].data[0]
          },
          {
            name: "新增游客",
            type: "line",
            smooth: true,
            data: yearData[0].data[1]
          }
        ]
      };
      myChart.setOption(option);
      return () => {
        if (myChart) {
          myChart.dispose();
        }
      }
    }
  }, [])
  return (
    <div className='LineChart1' ref={chartRef} style={{ width: '100%', height: "100%" }}></div>
  )
}
